<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_模板解析_事件指令</title>
</head>
<body>
  <!-- 
  事件指令解析
  	1). 从指令名中取出事件名  on:click  => click
  	2). 根据指令属性值(表达式)从methods中得到对应的事件处理函数对象
  	3). 给当前元素节点绑定指定事件名和回调函数的dom事件监听
  	4). 指令解析完后, 移除此指令属性
  -->
  <div id="test">
    <button v-on:click="test">测试</button>
    <!-- 
      button.addEventListener('click', this.test.bind(vm))
    -->
  </div>

  <script src="./js/mvvm/compile.js"></script>
  <script src="./js/mvvm/mvvm.js"></script>
  <script src="./js/mvvm/observer.js"></script>
  <script src="./js/mvvm/watcher.js"></script>
  <script>
    new MVVM({
      el: '#test',
      data: {
        name: 'Tom'
      },
      methods: {
        test () {
          alert(this.name)
        }
      }
    })
  </script>
</body>
</html>